import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment, { isDate } from 'moment';
import router from 'umi/router';
import { Form, Input, Select, Collapse } from 'antd';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { codes, SendType, Status } from './utils';
import { formatCodeVal } from '@/pages/Common/common';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const Panel = Collapse.Panel;

@connect(({ sender, loading, common }) => ({
  sender,
  loading: loading.effects['sender/senderDetails'],
  // dictObject: common.dictObject,
}))
@Form.create()
export default class SenderDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: ['1'],
    };
  }
  componentDidMount() {}

  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  render() {
    const { activeKey } = this.state;
    const {
      checkId,
      sender: { senderDetails },
      isMobile,
    } = this.props;
    const details = senderDetails[checkId];

    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };
    const sendType = details ? formatCodeVal(SendType, details.sendType) : '';
    const beActive = details ? formatCodeVal(Status, details.beActive) : '';
    const fields = [
      { key: 'accountName', name: '账号' },
      { key: 'accountName', name: '账号名称' },
      { key: beActive, name: '状态', isConst: true },
      { key: 'frequencyLimit', name: '频率上限' },
      { key: sendType, name: '联系方式', isConst: true },
      { key: 'keyLock', name: '密钥信息' },
      { key: 'token', name: '令牌信息' },
    ];

    return (
      <div className={styles.CollapseDetails}>
        <Collapse activeKey={activeKey} onChange={key => this.callback(key)} bordered={false}>
          <Panel header="基础信息" key="1" className={styles.customPanelStyle}>
            <DetailsList isMobile={isMobile} detilsData={{ fields: fields, value: details }} />
          </Panel>
        </Collapse>
      </div>
    );
  }
}
